{% extends "base.html" %}
{% load staticfiles %}

{% block title %}移交申请{% endblock %}

{% block content %}
    <!-- 移交申请模态框 -->
    <div class="modal fade" data-backdrop="static" id="modal_enviro_modify" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">移交申请</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="margin-top:3%"><label>原归属人</label>
                            <select class="opts" id="preuser">
                                {% for foo in orguser %}
                                    <option value="{{ foo.customerid }}">{{ foo.customerid }}</option>
                                {% endfor %}
                            </select>
                            <div id="preuser_info" class="input-envir"></div>
                        </div>
                        <div style="margin-top:3%"><label>策略组</label>
                            <select class="opts" id="group">
                                <option value="1">做市策略</option>
                                <option value="2">CTA策略</option>
                            </select>
                            <div id="group_info" class="input-envir"></div>
                        </div>
                        <div style="margin-top:3%">
                            <label for="transferstg">移交策略</label>
                            <input class="opts" style="cursor: pointer" id="transferstg" name="backtype" value="" readonly>
                            <ul id="ultrans" class="transul">
                                {% for user in userobj %}
                                    <li class="transli" style="display:none;">
                                        <label>
                                            <input stgid="{{ user.stgid }}" type="checkbox" stgrp="{{ user.stggroup }}"
                                                   name="{{ user.customerid }}" class="stgname">{{ user.stgname }}
                                        </label>
                                    </li>
                                {% endfor %}
                            </ul>
                            <div id="transferstg_info" class="input-envir"></div>
                        </div>
                        <div style="margin-top:3%"><label>移交至</label>
                            <select class="opts" id="nextuser">
                                {% for foo in user %}
                                    <option value="{{ foo.customerid }}" style="display: none"
                                            class="nextowner">{{ foo.customerid }}</option>
                                {% endfor %}
                                <option value="{{ currentuser }}" id="currentuser">{{ currentuser }}</option>
                            </select>
                            <div id="nextuser_info" class="input-envir"></div>
                        </div>
                        <hr/>
                        <div style="height: 20px; display: block">
                            <div style="padding-left:120px; float: left;">
                                <span class="btn-cancel btn-stc" onclick="fad_envir_modal()">取消</span>
                            </div>
                            <div style="padding-left:5px;float: left;">
                                <span class="btn-confirm btn-stc" onclick="subs()">提交</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 环境删除失败提醒 -->
    <div class="modal fade" data-backdrop="static" id="enviro_delete_notice">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">删除失败提醒</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-top:3%; display: block">
                        已有策略挂在此环境下，不可删除!
                    </div>
                    <div style="height: 30px; display: block;margin-top: 20px">
                        <div style="padding-left:120px; float: left;">
                            <span class="btn-confirm btn-stc" onclick="delete_fad()">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 环境删除确认 -->
    <div class="modal fade" data-backdrop="static" id="modal_enviro_delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">删除环境确认</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-top:3%; display: block" id="confirm_env">
                        确认删除该环境？
                    </div>
                    <div style="height: 30px; display: block;margin-top: 20px">
                        <div style="padding-left:100px; float: left;">
                            <span class="btn-cancel btn-stc" onclick="delete_fd()">取消</span>
                        </div>
                        <div style="padding-left:5px; float: left;">
                            <span id="del_enviro" sid_enviro="" class="btn-confirm btn-stc"
                                  onclick="delete_enviro()">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 操作成功模态框-->
    <div class="modal fade" data-backdrop="static" id="oper_success">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="success-title"></h4>
                </div>
                <div class="modal-body">
                    <div class="operat-success" id="msg_success">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <body>
    <section>
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active" style="margin-top:10px"><a href="#fa-pack" onclick="tabs(1)"
                                                              data-toggle="tab">移交列表</a></li>
            </ul>
            <div class="tab-content">
                <!--移交列表-->
                <div class="tab-pane active">
                    <div>
                        <div class="div-query">
                            <div class="lbl-query">
                                <button class="btn-add" onclick="envir_model()">移交申请</button>
                            </div>
                            <div class="lbl-query"><span>原归属人</span>
                                <input class="input-query" type="text" id="preowner">
                            </div>
                            <div class="lbl-query"><span>策略名称</span>
                                <input class="input-query" type="text" id="rulename">
                            </div>
                            <div class="lbl-query">
                                <span>策略状态</span>
                                <select class="input-query" id="rulestatus">
                                    <option value=""></option>
                                    <option value="1">待审批</option>
                                    <option value="3">审批通过</option>
                                </select></div>
                            <div class="lbl-query">
                                <button class="btn-query" onclick="trans_search()">查询</button>
                            </div>
                        </div>
                        <table class="table-stc" id="TransAppTable">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    </body>
{% endblock %}

{% block scripts %}

    <script type="text/javascript">


        //移交申请模态框展示
        function envir_model() {
            $("#currentuser")
            $("#ultrans").attr("style", "display:none")
            $('.modal-title').text('移交申请');
            //取消值，取消提示
            $("input").val("");
            $("select").val("");
            $(".input-envir").text("")
            $('#modal_enviro_modify').modal("show");
        }

        //移交申请模态框取消按钮
        function fad_envir_modal() {
            $('#modal_enviro_modify').modal('hide');

        }


        //监听原归属人input，展示策略
        $("#preuser").on("change", function () {
            /**
             * tagArr数组用于保存复选框在select框的展示值
             * 每次重新选择，都要将tagarr置空，否则会将
             * 上次的值也一起带出来
             ***/
            tagArr = []
            $("#nextuser").val("")
            {#$('#transferstg').html("");#}
            $('#transferstg').val("");
            quit_checkbox()
            var oriowner = $("#preuser").val()
            var grp = $("#group").val()
            var newowner = $("#currentuser").val()
            //如果原归属人是当前用户，移交至 去掉当前用户
            if (newowner === oriowner){
                $("#currentuser").css("display", "none")
            }
            else {
                $("#currentuser").css("display", "block")
            }
            $(".stgname").each(function () {
                var li_customer = $(this).attr("name")
                var li_group = $(this).attr("stgrp")
                if (li_customer === oriowner && li_group === grp || li_customer === oriowner && !grp) {
                    $(this).parent().parent().css("display", "block")
                } else {
                    $(this).parent().parent().css("display", "none")
                }
            })

            $(".nextowner").each(function () {
                if ($(this).val() === oriowner) {
                    $(this).css("display", "none")
                } else {
                    $(this).css("display", "block")
                }
            })
        })

        //监听策略组input，展示策略
        $("#group").on('change', function () {
            /**
             * tagArr数组用于保存复选框在select框的展示值
             * 每次重新选择，都要将tagarr置空，否则会将
             * 上次的值也一起带出来
             ***/
            tagArr = [];
            {#$('#transferstg').html("");#}
            $('#transferstg').val("");
            quit_checkbox()
            var grp = $("#group").val()
            var oriowner = $("#preuser").val()
            $(".stgname").each(function () {
                var li_customer = $(this).attr("name")
                var li_group = $(this).attr("stgrp")
                if (li_group === grp && li_customer === oriowner || li_group === grp && !oriowner) {
                    $(this).parent().parent().css("display", "block")
                } else {
                    $(this).parent().parent().css("display", "none")
                }
            })
        })


        //移交申请校验
        function checkvalue(datadic) {
            for (let key in datadic) {
                if (!datadic[key] || datadic[key].length === 0) {
                    var title = $("#" + key).prev().text()
                    $("#" + key + "_info").text(title + '不能为空')
                    return "no"
                }
            }
            return "y"

        }

        //所有复选框取消
        function quit_checkbox() {
            $(".stgname:checked").each(function () {
                $(this).prop("checked", false);
            });
        }

        //移交申请提交
        function subs() {
            $(".input-envir").text("")
            var oriowner = $("#preuser").val();
            var stgroup = $("#group").val();
            var stgidlist = [];
            $(".stgname:checked").each(function () {
                stgidlist.push($(this).attr("stgid"))
            });
            var nextowner = $("#nextuser").val();
            var dataobj = {
                "preuser": oriowner,
                "group": stgroup,
                "transferstg": stgidlist,
                "nextuser": nextowner,
            }
            const flag = checkvalue(dataobj)

            if (flag === "no") {
                return;
            }
            fad_envir_modal()
            loadon()
            $.ajax({
                url: "/trade/transfer_application/",
                type: 'post',
                data: {
                    "oowner": oriowner,
                    "stgp": stgroup,
                    "stgidlist": JSON.stringify(stgidlist),
                    "nowner": nextowner,
                    "type": "tran_app"
                },
                success: function (data) {
                    loadoff()
                    if (data !== "error" && data !== "exist") {
                        rendertable(data)
                        $("#success-title").text("移交申请")
                        $("#msg_success").text("策略移交申请成功！")
                        $("#oper_success").modal("show")
                        var tip = setTimeout(function () {
                            $("#oper_success").modal("hide")
                            window.location.reload()
                            clearTimeout(tip)
                        }, 2000)
                    } else if (data === "exist") {
                        $("#success-title").text("移交申请")
                        $("#msg_success").text("当前移交申请已存在，请审批后重新申请！")
                        $("#oper_success").modal("show")
                        var tip = setTimeout(function () {
                            $("#oper_success").modal("hide")
                            window.location.reload()
                            clearTimeout(tip)
                        }, 2000)
                    } else {
                        $("#success-title").text("移交申请")
                        $("#msg_success").text("服务器错误！")
                        $("#oper_success").modal("show")
                        var tip = setTimeout(function () {
                            $("#oper_success").modal("hide")
                            window.location.reload()
                            clearTimeout(tip)
                        }, 2000)
                    }
                }
            })
        }

        //查询
        function trans_search() {
            var oriowner = $("#preowner").val();
            var stgname = $("#rulename").val();
            var status = $("#rulestatus").val()
            $.ajax({
                url: "/trade/transfer_application/",
                type: 'post',
                data: {
                    "oowner": oriowner,
                    "stgname": stgname,
                    "status": status,
                    "type": "search"
                },
                success: function (data) {
                    rendertable(data)
                }
            })
        }

        //columns
        var columns = [
            {
                field: 'orignalowner',
                width: 100,
                title: '原归属人'
            }, {
                field: 'ruleid',
                width: 100,
                title: '移交策略ID'
            }, {
                field: 'stgname',
                width: 100,
                title: '移交策略名'
            }, {
                field: 'newowner',
                title: '移交至',
                width: 100,
            },
            {
                field: 'applydatetime',
                title: '申请时间',
                width: 100,
            }, {
                field: 'auditstatus',
                title: '审批状态',
                width: 100,
            },
        ];

        //渲染页面
        function rendertable(data) {
            var objlist = JSON.parse(data);
            var objtable = [];
            for (let i = 0; i < objlist.length; i++) {
                objtable.push(objlist[i].fields)
            }
            $("#TransAppTable").bootstrapTable("destroy").bootstrapTable({
                height: 600,
                columns: columns,
                data: objtable,
                // height: 600,
                {#width: 100,#}
                //******前端分页设置****
                pagination: true,
                pageNumber: 1,
                pageSize: 20,
                pageList: [10, 20, 50, 100],
                paginationHAlign: "right",
                paginationDetailHAlign: "left"
                //******前端分页设置****
            })
        }

        //页面加载
        $(function () {
            trans_search()
        })


        var tagArr = []

        /**
         * [dropDownCk 下拉复选框]
         * @param  {[String]} boxId    [父级元素id]
         * @param  {[String]} selectId [下拉选id]
         * @param  {[String]} hiddenId [隐藏区域id]
         * @return {[Array]}          [description]
         */
        function dropDownCk(selectId, hiddenId) {

            var boxId = "#" + boxId,
                selectId = "#" + selectId,
                hiddenId = "#" + hiddenId;

            $(hiddenId).mouseleave(function () { // 鼠标离开隐藏复选区域
                $(this).hide();

            });

            $(selectId).click(function () { // 切换显示与隐藏

                $(hiddenId).toggle();
            });

            {#var tagArr = []; // 接收复选字段数组#}

            $(hiddenId + ' label').find('input').click(function () { // 点击向数组添加元素
                if ($(this).is(':checked')) {
                    tagArr.push($(this).parent().text().replace(/^\s*|\s*$/g, ""));
                    {#$(selectId).html("<option checked='true' style='display:none;'>" + tagArr.join(",") + "</option>");#}
                    $(selectId).val(tagArr.join(","));

                } else {

                    tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素

                    if (tagArr.length == 0) {

                        $(selectId).val("");

                    } else {

                        $(selectId).val(tagArr.join(","));

                    }

                }

            });

            return tagArr;
        }

        var tag1 = dropDownCk("transferstg", "ultrans");

        $("#transferstg").on("change", function () {
            var stg = $("#transferstg").val()
            if (!stg) {
                $(".stgname:checked").each(function () {
                    $(this).prop("checked", false);
                });
            }

        })


    </script>

{% endblock %}